<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">
            <h2>排名前10的商品</h2>
            <br>

			<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
				<figure>
					<a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
					</a>
					<figcaption>
						<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
							<i class="fas fa-search-plus"></i>
						</a></div>
					</figcaption>
				</figure>
				<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
				<p><span class="emphasis">${{ item.price }}</span></p>
			</div>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';

export default {
  data () {
    return {
      //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'商品排行榜'}],
	  goodslist:[],
    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },
  mounted:function(){

	// 赋值
	console.log(this.word);

		this.axios.get('http://localhost:8000/goodrank/').then((result) =>{

			// 赋值
			this.goodslist = result.data;

  		});




   
  
},
  methods:{


     
  }
}


</script>
 
<style>



</style>